<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>巡航机器人监控系统</title>
		    <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
		      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" rel="stylesheet">
			  <link href="css/home_style.css" rel="stylesheet">
			<!-- <link href="css/progress_bar.css" rel="stylesheet"> -->
		<script crossorigin="anonymous"
			integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
			src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。
<script crossorigin="anonymous"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> -->
			<script type="text/javascript">
			  var URL = window.URL || window.webkitURL; // 获取到window.URL对象
			  navigator.getUserMedia({
				  video: true
			  }, function (stream) {
				  video.srcObject = stream;
				  video2.srcObject = stream;
				  video3.srcObject = stream;
				  // console.log(video.srcObject)
			  }, function (error) {
				  console.log(error.name || error);
			  });
			
				$(function(){
					$("#backManager").mouseover(function(){
						// $("#backManager").css("color","red");
						$("#backManagement").show();
					});
					$("#backManager").mouseout(function(){
						// $("#backManager").css("color","white");
						$("#backManagement").hide();
					});
					$("#backManagement").mouseover(function(){
						$("#backManagement").show();
					});
					$("#backManagement").mouseout(function(){
						$("#backManagement").hide();
					});
				})
			</script>
	</head>
	<body style="background: url('/background-11.png')  center fixed; background-size: 100%;">
<div class="container-fluid">
	<div class="row new-title" style="color: white;">
		<div class="col-md-2"><img alt="#" class="img-responsive center-block top-logo" src="/Wlogo.png"></div>
		<div class="col-md-8">
			<h1 class="text-center">巡航机器人监控系统</h1>
		</div>
		<div class="col-md-2">
			<h4 class="text-center">当前用户:肖亮</h4>
			<h4 class="text-center" id="datetime">
			<script>
				setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
			</script>
			</h4>
			<a href="#"><h4 class="text-center text-color-green">退出登录</h4></a>
		</div>
	</div>
</div>

<div class="new-content">
    <div class="row">
        <div class="col-md-4">
			<div class="col-md-4">
				<br><br>
				<div id="backManager">
					<a href="" style="text-align: left;" >
					<h2 class="text-color-green">后</h2>
					<h2 class="text-color-green">台</h2>
					<h2 class="text-color-green">管</h2>
					<h2 class="text-color-green">理</h2>
					</a>
				</div>
				<div id="backManagement" class="alert alert-success" role="alert">
					<a class="back-show" href="/UserManagement.html">用户管理</a><br><br><br>
					<a class="back-show" href="/LogManagement.html">日志管理</a><br><br><br>
					<a class="back-show" href="#">参数管理</a><br><br><br>
					<a class="back-show" href="/RobotManagement.html">机器管理</a><br><br><br>
					<a class="back-show" href="#">巡检管理</a>
				</div>
				
			</div>
			<div class="col-md-8">
				<video autoplay id="video2" class="center-block" controls="controls"
					   loop="loop" muted="muted"
					   style="object-fit:fill;width: 320px;margin-top: 20px"></video>
					   <br>
				<video autoplay class="center-block" controls="controls"
					   loop="loop" muted="muted" id="video3"
					   style="object-fit:fill;width: 320px;margin-top: 20px"></video>
					   <br><br>
				<!-- <div class="alert alert-success new-alert" role="alert"> -->
				<<div class="controlMan">
					<span class="new-title" style="font-size: 15px;margin-left: 10px;margin-right: 10px">行走方向：</span>
					<a href="#"><img src="/上箭头.png" height="40px;" style="margin-top: 2px" title="W" alt="#"></a>
					<a href="#"><img src="/下箭头.png" height="40px" style="margin-left: 10px;margin-top: -5px" title="S" alt="#"></a>
					<a href="#"><img src="/左箭头.png" height="40px" style="margin-left: 10px" title="A" alt="#"></a>
					<a href="#"><img src="/右箭头.png" height="40px" style="margin-left: 10px" title="D" alt="#"></a>
					<br><br><br>
					<p class="new-title" style="font-size: 15px;margin-top: -10px">机器人控制：<span id="text_xa_">25%</span></p>
					<div id="box_">
						<div id="bg_">
							<div id="bgcolor_"></div>
						</div>
						<div id="bt_"></div>
					</div>
					<br><br>
				</div> 
				
			</div>
		</div>
		<div class="col-md-4">
			<video autoplay class="center-block" controls="controls"
			       loop="loop" muted="muted" id="video"
			       style="object-fit:fill;text-align: center;margin-top: 20px" ></video>
			<br><br>
			<div class="col-md-6">
				<table border="1">
					<tr>
						<td colspan="2">机器人参数</td>
					</tr>
					<tr>
						<td>实时功率</td>
						<td>100W</td>
					</tr>
					<tr>
						<td>电池电压</td>
						<td>1.5V</td>
					</tr>
					<tr>
						<td>剩余电量</td>
						<td>40%</td>
						
					</tr>
					<tr>
						<td>运行速度</td>
						<td>100m/s</td>
					</tr>
				</table>
			</div>
			<div class="col-md-6">
				<table border="1">
					<tr>
						<td colspan="2">环境参数</td>
					</tr>	
					<tr>
						<td>风速</td>
						<td>100m/s</td>
						
					</tr>
					<tr>
						<td>湿度</td>
						<td>40%</td>
						
					</tr>
					<tr>
						<td colspan="2">设备参数</td>
						
					</tr>
					<tr>
						<td>减速机输出</td>
						<td>100V</td>
					</tr>
					<tr>
						<td>输入端轴承震动</td>
						<td>200m2/s</td>
					</tr>
				</table>
			</div>
			
		</div>
		<div class="col-md-4">
			<div class="col-md-1"></div>
			<div class="col-md-8">
				<br><br><br><br>
				<div id="container2" style="width:400px; height:300px;"></div>
				<script type="text/javascript" src="js/mypicture2.js"></script>
				<br><br><br><br>
				<div id="container" style="width:450px; height:300px;"></div>
				<script type="text/javascript" src="js/mypicture.js"></script>
				
				
			</div>
			
			<div class="col-md-3">
				
			</div>
				
		</div>
	</div>
</div>

<script type="text/javascript">
    $(window).ready(function jindu($) {
        var $box = $('#box_');
        var $bg = $('#bg_');
        var $bgcolor = $('#bgcolor_');
        var $btn = $('#bt_');
        var $text = $('#text_xa_');
        var statu = false;
        var ox = 0;
        var lx = 0;
        var left = 100;
        var bgleft = 0;
        $btn.mousedown(function(e) {
            lx = $btn.offset().left;
            ox = e.pageX - left;
            statu = true;
        });
        $(document).mouseup(function() {
            statu = false;
        });
        $box.mousemove(function(e) {
            if (statu) {
                left = e.pageX - ox;
                if (left < 0) {
                    left = 0;
                }
                if (left > 400) {
                    left = 400;
                }
                $btn.css('left', left);
                $bgcolor.width(left);
                $text.html('' + parseFloat(left / 4).toFixed(0) + '%');
            }
        });
        $bg.click(function(e) {
            if (!statu) {
                bgleft = $bg.offset().left;
                left = e.pageX - bgleft;
                if (left < 0) {
                    left = 0;
                }
                if (left > 400) {
                    left = 400;
                }
                $btn.css('left', left);
                $bgcolor.stop().animate({
                    width: left
                }, 200);
                $text.html('' + parseFloat(left / 4).toFixed(0) + '%');
            }
        });
    })
</script>
<div class="alert alert-success new-alert" id="stateDiv">
					通讯状态：&nbsp;&nbsp;<span>正常</span>
					<br><br>
					工作状态：&nbsp;&nbsp;<span>电量低</span>
					<br><br>
					巡检方式：&nbsp;&nbsp;
					<select class="new-alert form-control">
					  <option value ="autoCheck">自动巡检</option>
					  <option value ="manCheck">手动巡检</option>
					  <option value="offCheck">停机</option>
					</select>
				</div>
	</body>
</html>
